<template>
	<view class="header">
		<uni-icons type="left" size="25"></uni-icons>
		<view class="title">我的宝宝</view>
		<view class="add-btn">+添加宝宝</view>
	</view>
	<view>
		<uni-list>
			<uni-list :border="true">
				<uni-list-chat :avatar-circle="true" title="梓宁宝宝" avatar="../../../static/uni.png" note="6个月"  badge-positon="left" >
					<view class="chat-custom-right">
						<uni-icons type="right" color="#999" size="18" ></uni-icons>
					</view>
				</uni-list-chat>
				
				<uni-list-chat :avatar-circle="true" title="梓宁宝宝" avatar="../../../static/uni.png" note="6个月" time="2020-02-02 20:20" badge-positon="left" >
					<view class="chat-custom-right">
						<uni-icons type="right" color="#999" size="18" ></uni-icons>
					</view>
				</uni-list-chat>			
			</uni-list>
		</uni-list>
	</view>
</template>

<script setup>
	
</script>

<style scoped>
.header {
	background-color: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 14rpx;
	position: relative;
	border-bottom: 4rpx solid #f2f2f2;
}
.title {
	font-size: 32rpx;
	font-weight: bold;
	position: absolute;
	left: 310rpx;
}
.add-btn {
	font-size: 30rpx;
	color: blue;
	position: absolute;
	right: 36rpx
}
	    
.chat-custom-right {
	flex: 1;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;
}

.chat-custom-text {
	font-size: 12px;
	color: #999;
}		
		   
</style>
